<template>
    <div class="bg-container">
        <!-- 客户列表 -->
        <div class="my-header">
            <div class="search-form" v-if="headerShow">
                <a-form size="small" :model="pageData" layout="inline">
                    <a-form-item label="客户名称">
                        <a-input default-value="" v-model="pageData.customName" placeholder="" allow-clear
                            @press-enter="huiche" />
                    </a-form-item>
                </a-form>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
            <div class="my-tool-bar">
                <!-- <Toolbar :items="['查询', '新增',]" @add="addHandler" @import="importHandler" @del="deleteHandler"
                    @select="selectHandler" @export="exports" @excel="downloadHandler">
                </Toolbar> -->
                <div class="bg-container-1">
                    <div>
                        <el-button type="primary" :icon="Search" class="stbutencx" @click="selectHandler">查询</el-button>
                        <el-button type="success" :icon="CirclePlus" class="stbutenxz" @click="addHandler">新增</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="gang"></div>

    <div ref="tablediv" style="padding: 10px; box-sizing: border-box;min-height:100%;background-color: #fff;">
        <!-- <a-tabs   :justify="true">
            <a-tab-pane title="客户列表">
                <a-table style="height: 100%;" size="mini" :scrollbar="scrollbar" sticky-header stripe :bordered="true"
                    :columns="columns" :loading="table.tableLoading" :data="tableCon.tableConter" :pagination="false"
                    :rowKey="rowKey">
                    <template #whether="{ record }">
                        <a-checkbox></a-checkbox>
                    </template>
                    <template #action="{ record }">
                        <a-button type="primary" size="mini" status="warning" @click="editHandler(record)">
                            <template #icon>
                                <icon-edit />
                            </template>
                            修 改
                        </a-button>
                        &nbsp;
                        <a-button type="primary" size="mini" status="danger" @click="deleteHandler(record)">
                            <template #icon>
                                <icon-edit />
                            </template>
                            删 除
                        </a-button>
                    </template>
                </a-table>
            </a-tab-pane>
        </a-tabs> -->
        <AgGridVuesCopys style="height:67.5vh;" class="ag-theme-alpine" :columnDefs="tc" :rowData="tableCon.tableConter"
            :defaultColDef="defaultColDef" rowSelection="multiple" @grid-ready="gridReady" :suppressCopyRowsToClipboard="true">
        </AgGridVuesCopys>
        <div class="pagings" v-if="headerShows">
            <paginationCopys :total="paging.total" v-model:current='pages' show-page-size show-total show-jumper size="mini"
                @change="pagingChange" @page-size-change="pagingSizeChange" :page-size="paging.size"/>
        </div>
    </div>

    <a-drawer :drawer-style="{ 'zIndex': 9999 }" :mask-closable="false" height="100%" :visible="pageData.showAdd"
        placement="bottom" unmountOnClose @ok="sideOk" @cancel="yonghlbgb"  cancel-text='关闭'
        ok-text='保存'>
        <template #title>
            {{ pageData.sideTitle }}
        </template>
        <div style="min-width: 1600px;">
            <a-form ref="formRef" :model="dataForm">
                <a-row class="grid-demo" :gutter="24">
                    <a-col :span="6">
                        <a-form-item label="客户编号" label-col-flex="90px" field="customCode"
                            :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '客户编号必填' }]">
                            <a-input v-model="dataForm.customCode" @blur="sqblur" class="bacClass"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="客户名称" label-col-flex="90px" field="customName"
                            :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '客户名称必填' }]">
                            <a-input v-model="dataForm.customName" class="bacClass"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="客户全称" label-col-flex="90px" :validate-trigger="['change', 'blur']"
                            :rules="[{ message: '客户全称必填' }]">
                            <a-input v-model="dataForm.customFullName" class="bacClass"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="地址" label-col-flex="90px" field="address" :validate-trigger="['change', 'blur']"
                            :rules="[{ required: true, message: '地址必填' }]">
                            <a-input v-model="dataForm.address" class="bacClass"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="grid-demo" :gutter="24">
                    <a-col :span="6">
                        <a-form-item label="区域" label-col-flex="90px" field="customArea"
                            :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '区域必填' }]">
                            <a-select popup-container="html"  :loading="loading" :allowClear="true" @search="handleSearch" class="bacClass"
                                v-model="dataForm.customArea" :filter-option="false" allow-search @focus="focusSel">
                                <a-option v-for="item in pageData.clothList" :value="item.customArea">{{
                                    item.customArea
                                }}</a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="电话" label-col-flex="90px" field="phoneNum"
                            :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '电话称必填' }]">
                            <!-- <a-input-number v-model="dataForm.phoneNum" placeholder="" class="input-demo"
                                max-length="11" :min="0" /> -->
                            <a-input v-model="dataForm.phoneNum" max-length="11" @input="shisjg" class="bacClass"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="部门" label-col-flex="90px" :validate-trigger="['change', 'blur']"
                            :rules="[{ message: '部门必填' }]">
                            <!-- <a-select popup-container="html"  :loading="loadings" :allowClear="true" @search="handleSearchs"
                                v-model="dataForm.department" :filter-option="false" allow-search @focus="focusSels">
                                <a-option v-for="item in dropDown.bumen" :value="item.customArea">{{
                                        item.customArea
                                }}</a-option>
                            </a-select> -->
                            <a-cascader :options="bmoption.bmoptions" v-model="dataForm.department" placeholder=""
                                allow-clear @change="bmchange" class="bacClass" popup-container="html"/>
                            <!-- <a-input v-model="dataForm.department" /> -->
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="业务员" label-col-flex="90px" :validate-trigger="['change', 'blur']"
                            :rules="[{ message: '业务员必填' }]">
                            <a-select popup-container="html"  v-model="dataForm.salesman" placeholder="" allow-clear @popup-visible-change="ywgbcf" @change="ywychange" class="bacClass" >
                                <a-option v-for="item of bmoption.salesmans" :key="item.id" :value="item.name"
                                    :label="item.name" />
                            </a-select>
                            <!-- <a-input v-model="dataForm.salesman" /> -->
                            <!-- <a-cascader :options="bmoption.salesmans" v-model="dataForm.salesman" placeholder=""
                                allow-clear /> -->
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="grid-demo" :gutter="24">
                    <a-col :span="6">
                        <a-form-item label="建档日期" label-col-flex="90px" field="filingDate"
                            :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '建档日期必填' }]">
                            <a-date-picker  popup-container="html"  class="bacClass" style="width:100%" v-model="dataForm.filingDate" format="YYYY-MM-DD"
                                placeholder=" " />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="开户行" label-col-flex="90px" :validate-trigger="['change', 'blur']"
                            :rules="[{ message: '开户行必填' }]">
                            <a-input v-model="dataForm.accountBank" class="bacClass"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="账号" label-col-flex="90px" :validate-trigger="['change', 'blur']"
                            :rules="[{ message: '账号必填' }]">
                            <!-- <a-input-number v-model="dataForm.account" placeholder="" class="input-demo" :min="0" /> -->
                            <a-input v-model="dataForm.account" onkeyup="value=value.replace(/[^\d]/g,'')" class="bacClass"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="网址" label-col-flex="90px" :validate-trigger="['change', 'blur']"
                            :rules="[{ message: '网址必填' }]">
                            <a-input v-model="dataForm.url" class="bacClass"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="grid-demo" :gutter="24">
                    <a-col :span="6">
                        <a-form-item label="E-mail" label-col-flex="90px" :validate-trigger="['change', 'blur']"
                            :rules="[{ message: 'email必填' }]">
                            <a-input v-model="dataForm.email" class="bacClass"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="联系人" label-col-flex="90px" field="contactPerson"
                            :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '联系人必填' }]">
                            <a-input v-model="dataForm.contactPerson" class="bacClass"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="加工类型" label-col-flex="90px" field="machinType"
                            :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '加工类型必填' }]">
                            <a-select popup-container="html"  :loading="loadingas" :allowClear="true" @search="handleSearchas" class="bacClass"
                                v-model="dataForm.machinType" :filter-option="false" allow-search @focus="focusSelas">
                                <a-option v-for="item in dropDown.machining" :value="item.machinType">{{
                                    item.machinType
                                }}</a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="法人代表" label-col-flex="90px" :validate-trigger="['change', 'blur']"
                            :rules="[{ message: '法人代表必填' }]">
                            <a-input v-model="dataForm.legalPerson" class="bacClass"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="grid-demo" :gutter="24">
                    <a-col :span="6">
                        <a-form-item label="标签格式" label-col-flex="90px" field="labelFormat"
                            :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '标签格式必填' }]">
                            <a-select popup-container="html"  :loading="loadingasd" :allowClear="true" @search="handleSearchasd" class="bacClass"
                                v-model="dataForm.labelFormat" :filter-option="false" allow-search @focus="focusSelasd">
                                <a-option v-for="item in dropDown.label" :value="item.labelFormat">{{
                                    item.labelFormat
                                }}</a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-checkbox v-model="zsccfxsj.zscccgf" @change="xgfchange">
                            <span style="color:#4e5969;">小缸费</span>
                        </a-checkbox>
                        &nbsp;&nbsp;
                        <a-checkbox v-model="zsccfxsj.zsccwc" @change="wcchange">
                            <span style="color:#4e5969;">物测OK后才能批核</span>
                        </a-checkbox>
                    </a-col>
                </a-row>
            </a-form>
            <div style="margin-top:20px;">
                <a-tabs   :lazy-load="true" :justify="true" default-active-key="1" @change="talchange">
                    <a-tab-pane key="1" title="英文信息">
                        <div class="tjan">
                            <!-- <div class="shruq-but" @click="englishAdd">
                                <span>添加</span>
                            </div> -->
                            <el-button type="success" :icon="CirclePlus" class="stbutenxz"
                                @click="englishAdd">新增</el-button>
                        </div>
                        <!-- <a-table style="height: 100%;" size="mini" :scrollbar="scrollbar" sticky-header stripe
                            :bordered="true" :columns="InformationEnglishbt" :loading="table.tableLoading"
                            :data="tableCon.EnglishTable" :pagination="false" :rowKey="rowKey" :scroll="scroll">
                            <template #englishName="{ rowIndex }">
                                <a-input v-model="tableCon.EnglishTable[rowIndex].englishName" />
                            </template>
                            <template #englishFullName="{ rowIndex }">
                                <a-input v-model="tableCon.EnglishTable[rowIndex].englishFullName" />
                            </template>
                            <template #englishAddress="{ rowIndex }">
                                <a-input v-model="tableCon.EnglishTable[rowIndex].englishAddress" />
                            </template>
                            <template #shippingMark="{ rowIndex }">
                                <a-input v-model="tableCon.EnglishTable[rowIndex].shippingMark" />
                            </template>
                            <template #account="{ rowIndex }">
                                <a-input v-model="tableCon.EnglishTable[rowIndex].account" />
                            </template>
                            <template #accountBank="{ rowIndex }">
                                <a-input v-model="tableCon.EnglishTable[rowIndex].accountBank" />
                            </template>
                            <template #action="{ rowIndex }">
                                <a-button type="primary" size="mini" status="danger" @click="deleteEnglish(rowIndex)">
                                    <template #icon>
                                        <icon-edit />
                                    </template>
                                    删 除
                                </a-button>
                            </template>
                        </a-table> -->
                        <AgGridVuesCopys style="height:400px" class="ag-theme-alpine" :columnDefs="tcy"
                            :rowData="tableCon.EnglishTable" :defaultColDef="defaultColDefy" :enableColResize="true"
                            rowSelection="multiple" @grid-ready="gridReadye" :suppressCopyRowsToClipboard="true">
                        </AgGridVuesCopys>
                    </a-tab-pane>
                    <a-tab-pane key="2" title="品牌信息">
                        <div class="tjan">
                            <!-- <div class="shruq-but" @click="pinpaiAdd">
                                <span>添加</span>
                            </div> -->
                            <el-button type="success" :icon="CirclePlus" class="stbutenxz" @click="pinpaiAdd">新增</el-button>
                        </div>
                        <!-- <a-table style="height: 100%;" size="mini" :scrollbar="scrollbar" sticky-header stripe
                            :bordered="true" :columns="brandInformationbt" :loading="table.tableLoading"
                            :data="tableCon.brandInTable" :pagination="false" :rowKey="rowKey" :scroll="scroll">
                            <template #brandName="{ rowIndex }">
                                <a-input v-model="tableCon.brandInTable[rowIndex].brandName" />
                            </template>
                            <template #brandDescribe="{ rowIndex }">
                                <a-input v-model="tableCon.brandInTable[rowIndex].brandDescribe" />
                            </template>
                            <template #establishedTime="{ rowIndex }">
                                <a-date-picker  popup-container="html"  v-model="tableCon.brandInTable[rowIndex].establishedTime"
                                    format="YYYY-MM-DD" />
                            </template>
                            <template #brandOrientation="{ rowIndex }">
                                <a-input v-model="tableCon.brandInTable[rowIndex].brandOrientation" />
                            </template>
                            <template #manage="{ rowIndex }">
                                <a-input v-model="tableCon.brandInTable[rowIndex].manage" />
                            </template>
                            <template #saleChannel="{ rowIndex }">
                                <a-input v-model="tableCon.brandInTable[rowIndex].saleChannel" />
                            </template>
                            <template #salesOnlineArea="{ rowIndex }">
                                <a-input v-model="tableCon.brandInTable[rowIndex].salesOnlineArea" />
                            </template>
                            <template #saleArea="{ rowIndex }">
                                <a-input v-model="tableCon.brandInTable[rowIndex].saleArea" />
                            </template>
                            <template #annualIncome="{ rowIndex }">
                                <a-input v-model="tableCon.brandInTable[rowIndex].annualIncome" />
                            </template>
                            <template #annualIncomeUnit="{ rowIndex }">
                                <a-input v-model="tableCon.brandInTable[rowIndex].annualIncomeUnit" />
                            </template>
                            <template #action="{ rowIndex }">
                                <a-button type="primary" size="mini" status="danger" @click="deletePinpai(rowIndex)">
                                    <template #icon>
                                        <icon-edit />
                                    </template>
                                    删 除
                                </a-button>
                            </template>
                        </a-table> -->
                        <AgGridVuesCopys style="height:400px" class="ag-theme-alpine" :columnDefs="tcp"
                            :rowData="tableCon.brandInTable" :defaultColDef="defaultColDefp" :enableColResize="true"
                            rowSelection="multiple" @grid-ready="gridReadyp" :suppressCopyRowsToClipboard="true">
                        </AgGridVuesCopys>
                    </a-tab-pane>
                    <a-tab-pane key="3" title="送货信息">
                        <div class="tjan">
                            <!-- <div class="shruq-but" @click="songhuoAdd">
                                <span>添加</span>
                            </div> -->
                            <el-button type="success" :icon="CirclePlus" class="stbutenxz"
                                @click="songhuoAdd">新增</el-button>
                        </div>
                        <!-- <a-table style="height: 100%;" size="mini" :scrollbar="scrollbar" sticky-header stripe
                            :bordered="true" :columns="shippingInformationbt" :loading="table.tableLoading"
                            :data="tableCon.shippTable" :pagination="false" :rowKey="rowKey">
                            <template #deliveryAddress="{ rowIndex }">
                                <a-input v-model="tableCon.shippTable[rowIndex].deliveryAddress" />
                            </template>
                            <template #city="{ rowIndex }">
                                <a-input v-model="tableCon.shippTable[rowIndex].city" />
                            </template>
                            <template #country="{ rowIndex }">
                                <a-input v-model="tableCon.shippTable[rowIndex].country" />
                            </template>
                            <template #region="{ rowIndex }">
                                <a-input v-model="tableCon.shippTable[rowIndex].region" />
                            </template>
                            <template #remark="{ rowIndex }">
                                <a-input v-model="tableCon.shippTable[rowIndex].remark" />
                            </template>
                            <template #action="{ rowIndex }">
                                <a-button type="primary" size="mini" status="danger" @click="deleteSonghuo(rowIndex)">
                                    <template #icon>
                                        <icon-edit />
                                    </template>
                                    删 除
                                </a-button>
                            </template>
                        </a-table> -->
                        <AgGridVuesCopys style="height:400px" class="ag-theme-alpine" :columnDefs="tcs"
                            :rowData="tableCon.shippTable" :defaultColDef="defaultColDefs" :enableColResize="true"
                            rowSelection="multiple" @grid-ready="gridReadys" :suppressCopyRowsToClipboard="true">
                        </AgGridVuesCopys>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
    </a-drawer>
</template>

<script lang="ts">
import { post, get } from "@/api/http";
import { Search, CirclePlus, Delete } from "@element-plus/icons-vue";
import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
} from "@/hooks/table";

import { ref, reactive, onMounted, onActivated, onUnmounted, } from "vue";
import Toolbar from "@/components/Toolbar.vue";
import { Form, Message, Modal, Pagination } from "@arco-design/web-vue";
import { FormInstance } from "@arco-design/web-vue/es/form";
import emitter from "@/hooks/useEventBus";
import validate from "@/hooks/useValidate";
//import { baseURL } from '../../../api/axios.config'
import axios from "axios";
import filedownload from 'js-file-download'
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import {  } from "ag-grid-vue3";
import { slicing } from '@/utils/caseFrimAndSecRig'
interface ClothSet {
    id?: any;
    serialNumber?: number | undefined,
    mercery?: string | undefined;
    deleteState?: any
    remark?: string | undefined;
    createName?: string | undefined;
    createTime?: string | undefined;
    updateName?: string | undefined;
    customCode?: string | undefined;
    customName?: string | undefined;
    customFullName?: string | undefined;
    address?: string | undefined;
    customArea?: string | undefined;
    phoneNum?: string | undefined;
    department?: string | undefined;
    salesman?: string | undefined;
    salesmanId?: string | undefined;
    filingDate?: string | undefined;
    accountBank?: string | undefined;
    account?: string | undefined;
    url?: string | undefined;
    email?: string | undefined;
    contactPerson?: string | undefined;
    machinType?: string | undefined;
    legalPerson?: string | undefined;
    labelFormat?: string | undefined;
    smallCylinderCost?: number | undefined;
    okState?: number | undefined;
    englishName?: string | undefined;
    englishFullName?: string | undefined;
    englishAddress?: string | undefined;
    shippingMark?: string | undefined;
    brandName?: string | undefined,
    brandDescribe?: string | undefined,
    establishedTime?: string | undefined,
    brandOrientation?: string | undefined,
    manage?: string | undefined,
    saleChannel?: string | undefined,
    salesOnlineArea?: string | undefined,
    saleArea?: string | undefined,
    annualIncome?: string | undefined,
    annualIncomeUnit?: string | undefined,
    deliveryAddress?: string | undefined,
    city?: string | undefined,
    country?: string | undefined,
    region?: string | undefined,
}
interface pagings {
    size: number | string,
    total: number | string,
}
interface fcsj {
    zsxgf: string,
    zswc: string,
}
export default {
    name: "customeList",
    setup() {
        const headerShow = ref<boolean>(true)
        const headerShows = ref<boolean>(true)
        //查询
        const scrollbar = ref(true)
        const pages = ref(1);
        const paging: pagings = reactive({
            size: 10,
            total: 30,
        })
        const zsccfxsj: fcsj = reactive({
            zscccgf: false,
            zsccwc: false
        })
        function doRefresh() {

            pageData.pageLoading = true

            post({
                url: "/aps/custom/getPage",
                data: {
                    page: pages.value,
                    limit: paging.size,
                    deleteState: 0,
                    customName: pageData.customName,
                },
            })
                .then(({ data, code }: any) => {
                    if (code === 200) {

                        // console.log(data, "结果");
                        tableCon.tableConter = data.data;
                        paging.total = data.total;

                    }
                })
                .catch(console.log).finally(() => {
                    pageData.pageLoading = false
                })
        }
        const { selectedRowKeys, onSelectionChange } = useRowSelection();
        const pagination = usePagination(doRefresh);
        const table = useTable();
        const rowKey = useRowKey("id");
        //检验表单是否含有中文的方法
        const hasChiese = validate.includeChinese;
        const columns = [
            // {
            //     title: '是否有效',
            //     key: "",
            //     width: 100,
            //     align: "center",
            //     dataIndex: '',
            //     slotName: "whether",
            //     fixed: 'left',
            // },
            {
                title: '客户编号',
                key: "customCode",
                width: 150,
                dataIndex: 'customCode',
                align: "center"
            },
            {
                title: '客户名称',
                key: "customName",
                width: 150,
                dataIndex: 'customName',
                align: "center"
            },
            {
                title: '客户全称',
                key: "customFullName",
                width: 150,
                dataIndex: 'customFullName',
                align: "center"
            },
            {
                title: '地址',
                key: "address",
                width: 150,
                dataIndex: 'address',
                align: "center"
            },
            {
                title: '电话',
                key: "phoneNum",
                width: 150,
                dataIndex: 'phoneNum',
                align: "center"
            },
            {
                title: '联系人',
                key: "contactPerson",
                width: 150,
                dataIndex: 'contactPerson',
                align: "center"
            },
            {
                title: '业务员',
                key: "salesman",
                width: 150,
                dataIndex: 'salesman',
                align: "center"
            },
            {
                title: '开户行',
                key: "accountBank",
                width: 150,
                dataIndex: 'accountBank',
                align: "center"
            },
            {
                title: '账号',
                key: "account",
                width: 150,
                dataIndex: 'account',
                align: "center"
            },
            {
                title: 'E-mail',
                key: "email",
                width: 150,
                dataIndex: 'email',
                align: "center"
            },
            {
                title: '建立人',
                key: "createName",
                width: 150,
                dataIndex: 'createName',
                align: "center"
            },
            {
                title: '建立时间',
                key: "createTime",
                width: 150,
                dataIndex: 'createTime',
                align: "center"
            },
            {
                title: '修改人',
                key: "updateName",
                width: 150,
                dataIndex: 'updateName',
                align: "center"
            },
            {
                title: '修改时间',
                key: "updateTime",
                width: 150,
                dataIndex: 'updateTime',
                align: "center"
            },
            {
                title: '操作',
                key: "id",
                width: 180,
                dataIndex: 'id',
                slotName: "action",
                fixed: 'right',
                align: "center"
            },
        ];
        /************************************** */
        const columnDefs = [
            // {
            //     headerName: '',//选择列头部显示的文字，可以为空
            //     checkboxSelection: true,//设置为ture显示为复选框
            //     headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
            //     pinned: 'left', //固定再左边
            //     width: 50 //列的宽度
            // },
            { headerName: "客户编号", field: "customCode", width: 100 },
            { headerName: "客户名称", field: "customName", width: 100 },
            { headerName: "客户全称", field: "customFullName", width: 100 },
            { headerName: "地址", field: "address", width: 100 },
            { headerName: "电话", field: "phoneNum", width: 100 },
            { headerName: "联系人", field: "contactPerson", width: 100 },
            { headerName: "业务员", field: "salesman", width: 100 },
            { headerName: "开户行", field: "accountBank", width: 100 },
            { headerName: "账号", field: "account", width: 100 },
            { headerName: "E-mail", field: "email", width: 100 },
            { headerName: "建立人", field: "createName", width: 100 },
            { headerName: "建立时间", field: "createTime", width: 180 },
            { headerName: "修改人", field: "updateName", width: 100 },
            { headerName: "修改时间", field: "updateTime", width: 180 },
            { headerName: "操作", },

        ];
        const rowData = [
            { make: "Toyota", model: "Celica", price: 35000 },
            { make: "Ford", model: "Mondeo", price: 32000 },
            { make: "Porsche", model: "Boxster", price: 72000 },
            { make: "Toyota", model: "Celica", price: 35000 },
            { make: "Ford", model: "Mondeo", price: 32000 },
            { make: "Porsche", model: "Boxster", price: 72000 },
            { make: "Toyota", model: "Celica", price: 35000 },
            { make: "Ford", model: "Mondeo", price: 32000 },
            { make: "Porsche", model: "Boxster", price: 72000 },
        ];
        const defaultColDef = {
            sortable: true,
            filter: true,
             flex: null,
            resizable: true,
        };
        let tc: any[] = columnDefs.map((o) => {
            //let obj = {}
            if (o.headerName === '操作') {
                o['resizable'] = true
                o['filter'] = false
                o['sortable'] = false
                o["pinned"] = "right"
                o["width"] = 120
                o['cellRenderer'] = {
                    template: `<div>
                              <el-button style="color:#165dff;"  link  @click="a">修改</el-button>
                              <el-button style="color:#165dff;"  link  @click="s">删除</el-button>
                              </div>`,
                    setup(props: any) {
                        const a = () => {
                            editHandler(props.params.data)
                        }
                        const s = () => {
                            deleteHandler(props.params.data)
                        }
                        return {
                            a,
                            s
                        }
                    }

                }
            }
            return o
        })
        const gridOption = ref()
        const gridReady = (params: any) => {
            //  console.log(params, 123321);
            gridOption.value = params.api
            // params.api.sizeColumnsToFit()
        }
        /***************************************** */
        const tableCon = reactive({
            tableConter: [],
            EnglishTable: [
                {
                    englishName: "",
                    englishFullName: "",
                    englishAddress: "",
                    shippingMark: "",
                    account: "",
                    accountBank: "",
                    remark: ""
                },
            ],
            brandInTable: [
                {
                    brandName: "",
                    brandDescribe: "",
                    establishedTime: "",
                    brandOrientation: "",
                    manage: "",
                    saleChannel: "",
                    salesOnlineArea: "",
                    saleArea: "",
                    annualIncome: "",
                    annualIncomeUnit: "",
                    remark: "",
                },
            ],
            shippTable: [
                {
                    deliveryAddress: "",
                    city: "",
                    country: "",
                    region: "",
                    remark: "",
                }
            ]
        });
        //英文信息表头 
        // const InformationEnglishbt = [
        //     {
        //         title: '英文简称',
        //         key: "englishName",
        //         width: 150,
        //         dataIndex: 'englishName',
        //         align: "center",
        //         slotName: 'englishName'
        //     },
        //     {
        //         title: '英文全称',
        //         key: "englishFullName",
        //         width: 150,
        //         dataIndex: 'englishFullName',
        //         align: "center",
        //         slotName: 'englishFullName'
        //     },
        //     {
        //         title: '英文地址',
        //         key: "englishAddress",
        //         width: 150,
        //         dataIndex: 'englishAddress',
        //         align: "center",
        //         slotName: 'englishAddress'
        //     },
        //     {
        //         title: '唛头',
        //         key: "shippingMark",
        //         width: 150,
        //         dataIndex: 'shippingMark',
        //         align: "center",
        //         slotName: 'shippingMark'
        //     },
        //     {
        //         title: '账号',
        //         key: "account",
        //         width: 150,
        //         dataIndex: 'account',
        //         align: "center",
        //         slotName: 'account'
        //     },
        //     {
        //         title: '开户银行',
        //         key: "accountBank",
        //         width: 150,
        //         dataIndex: 'accountBank',
        //         align: "center",
        //         slotName: 'accountBank'
        //     },
        //     {
        //         title: '操作',
        //         key: "id",
        //         width: 180,
        //         dataIndex: 'id',
        //         slotName: "action",
        //         fixed: 'right',
        //         align: "center"
        //     },
        // ];
        /************************************** */
        const InformationEnglishbt = [
            // {
            //     headerName: '',//选择列头部显示的文字，可以为空
            //     checkboxSelection: true,//设置为ture显示为复选框
            //     headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
            //     pinned: 'left', //固定再左边
            //     width: 50 //列的宽度
            // },
            { headerName: "英文简称", field: "englishName", },
            { headerName: "英文全称", field: "englishFullName", },
            { headerName: "英文地址", field: "englishAddress", },
            { headerName: "唛头", field: "shippingMark", },
            { headerName: "账号", field: "account", },
            { headerName: "开户银行", field: "accountBank", },
            { headerName: "操作", },

        ];
        const defaultColDefy = {
            sortable: true,
            filter: true,
            flex: 1,
            resizable: true,
            editable: true,
        };
        let tcy: any[] = InformationEnglishbt.map((o) => {
            //let obj = {}
            if (o.headerName === '操作') {
                o['resizable'] = true
                o['filter'] = false
                o['sortable'] = false
                o["pinned"] = "right"
                o["width"] = 70
                o['cellRenderer'] = {
                    template: `<div>
                        <el-button style="color:#165dff;"  link  @click="s">删除</el-button>
                              </div>`,
                    setup(props: any) {
                        const s = () => {
                            deleteEnglish(props.params.rowIndex)
                        }
                        return {
                            s
                        }
                    }

                }
            }
            return o
        })
        const gridOptiony = ref()
        const gridReadye = (params: any,) => {
            gridOptiony.value = params.api
            // console.log("触发");
        }
        /***************************************** */
        //品牌信息表头
        // const brandInformationbt = [
        //     {
        //         title: '品牌',
        //         key: "brandName",
        //         width: 150,
        //         dataIndex: 'brandName',
        //         align: "center",
        //         slotName: 'brandName'
        //     },
        //     {
        //         title: '品牌描述',
        //         key: "brandDescribe",
        //         width: 150,
        //         dataIndex: 'brandDescribe',
        //         align: "center",
        //         slotName: 'brandDescribe'
        //     },
        //     {
        //         title: '成立时间',
        //         key: "establishedTime",
        //         width: 160,
        //         dataIndex: 'establishedTime',
        //         align: "center",
        //         slotName: 'establishedTime'
        //     },
        //     {
        //         title: '品牌定位',
        //         key: "brandOrientation",
        //         width: 150,
        //         dataIndex: 'brandOrientation',
        //         align: "center",
        //         slotName: 'brandOrientation'
        //     },
        //     {
        //         title: '经营状况',
        //         key: "manage",
        //         width: 150,
        //         dataIndex: 'manage',
        //         align: "center",
        //         slotName: 'manage'
        //     },
        //     {
        //         title: '销售渠道',
        //         key: "saleChannel",
        //         width: 150,
        //         dataIndex: 'saleChannel',
        //         align: "center",
        //         slotName: 'saleChannel'

        //     },
        //     {
        //         title: '网销区域',
        //         key: "salesOnlineArea",
        //         width: 150,
        //         dataIndex: 'salesOnlineArea',
        //         align: "center",
        //         slotName: 'salesOnlineArea'
        //     },
        //     {
        //         title: '销售区域',
        //         key: "saleArea",
        //         width: 150,
        //         dataIndex: 'saleArea',
        //         align: "center",
        //         slotName: 'saleArea'
        //     },
        //     {
        //         title: '年收入',
        //         key: "annualIncome",
        //         width: 150,
        //         dataIndex: 'annualIncome',
        //         align: "center",
        //         slotName: 'annualIncome'
        //     },
        //     {
        //         title: '年收入单位',
        //         key: "annualIncomeUnit",
        //         width: 150,
        //         dataIndex: 'annualIncomeUnit',
        //         align: "center",
        //         slotName: 'annualIncomeUnit'
        //     },
        //     {
        //         title: '操作',
        //         key: "id",
        //         width: 180,
        //         dataIndex: 'id',
        //         slotName: "action",
        //         fixed: 'right',
        //         align: "center"
        //     },
        // ];
        /************************************** */
        const brandInformationbt = [
            // {
            //     headerName: '',//选择列头部显示的文字，可以为空
            //     checkboxSelection: true,//设置为ture显示为复选框
            //     headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
            //     pinned: 'left', //固定再左边
            //     width: 50 //列的宽度
            // },
            { headerName: "品牌", field: "brandName", },
            { headerName: "品牌描述", field: "brandDescribe", },
            { headerName: "成立时间", field: "establishedTime", },
            { headerName: "品牌定位", field: "brandOrientation", },
            { headerName: "经营状况", field: "manage", },
            { headerName: "销售渠道", field: "saleChannel", },
            { headerName: "网销区域", field: "salesOnlineArea", },
            { headerName: "销售区域", field: "saleArea", },
            { headerName: "年收入", field: "annualIncome", },
            { headerName: "年收入单位", field: "annualIncomeUnit", },
            { headerName: "操作", },

        ];
        const defaultColDefp = {
            sortable: true,
            filter: true,
            flex: 1,
            resizable: true,
            editable: true,
        };
        let tcp: any[] = brandInformationbt.map((o) => {
            //let obj = {}
            if (o.headerName === '操作') {
                o['resizable'] = true
                o['filter'] = false
                o['sortable'] = false
                o["pinned"] = "right"
                o["width"] = 70
                o['cellRenderer'] = {
                    template: `<div>
                        <el-button style="color:#165dff;"  link  @click="s">删除</el-button>
                              </div>`,
                    setup(props: any) {
                        const s = () => {
                            deletePinpai(props.params.rowIndex)
                        }
                        return {
                            s
                        }
                    }

                }
            }
            return o
        })
        const gridOptionp = ref()
        const gridReadyp = (params: any,) => {
            gridOptionp.value = params.api
            //  console.log("触发");
        }
        /***************************************** */
        //送货信息表头
        // const shippingInformationbt = [
        //     {
        //         title: '送货地址',
        //         key: "deliveryAddress",
        //         width: 150,
        //         dataIndex: 'deliveryAddress',
        //         align: "center",
        //         slotName: "deliveryAddress",
        //     },
        //     {
        //         title: '城市',
        //         key: "city",
        //         width: 150,
        //         dataIndex: 'city',
        //         align: "center",
        //         slotName: "city",
        //     },
        //     {
        //         title: '国家',
        //         key: "country",
        //         width: 150,
        //         dataIndex: 'country',
        //         align: "center",
        //         slotName: "country",
        //     },
        //     {
        //         title: '地区',
        //         key: "region",
        //         width: 150,
        //         dataIndex: 'region',
        //         align: "center",
        //         slotName: "region",
        //     },
        //     {
        //         title: '备注',
        //         key: "remark",
        //         width: 150,
        //         dataIndex: 'remark',
        //         align: "center",
        //         slotName: "remark",
        //     },
        //     {
        //         title: '操作',
        //         key: "id",
        //         width: 180,
        //         dataIndex: 'id',
        //         slotName: "action",
        //         fixed: 'right',
        //         align: "center"
        //     },
        // ];
        /************************************** */
        const shippingInformationbt = [
            // {
            //     headerName: '',//选择列头部显示的文字，可以为空
            //     checkboxSelection: true,//设置为ture显示为复选框
            //     headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
            //     pinned: 'left', //固定再左边
            //     width: 50 //列的宽度
            // },
            { headerName: "送货地址", field: "deliveryAddress", },
            { headerName: "城市", field: "city", },
            { headerName: "国家", field: "country", },
            { headerName: "地区", field: "region", },
            {
                headerName: "备注", field: "remark",
                cellEditor: 'agLargeTextCellEditor', //编辑时 显示长文本框**************
                cellEditorParams: {
                    maxLength: '300',
                    cols: '50',
                    rows: '6'
                }
            },
            { headerName: "操作", },

        ];
        const defaultColDefs = {
            sortable: true,
            filter: true,
            flex: 1,
            resizable: true,
            editable: true,
        };
        let tcs: any[] = shippingInformationbt.map((o) => {
            //let obj = {} 
            if (o.headerName === '操作') {
                o['resizable'] = true
                o['filter'] = false
                o['sortable'] = false
                o["pinned"] = "right"
                o["width"] = 70
                o['cellRenderer'] = {
                    template: `<div>
                        <el-button style="color:#165dff;"  link  @click="s">删除</el-button>
                              </div>`,
                    setup(props: any) {
                        const s = () => {
                            deleteSonghuo(props.params.rowIndex)
                        }
                        return {
                            s
                        }
                    }

                }
            }
            return o
        })
        const gridOptions = ref()
        const gridReadys = (params: any,) => {
            gridOptions.value = params.api
            //  console.log("触发");
        }
        /***************************************** */
        //标签改变
        const talchange = (val) => {

        }
        //页改变
        const pagingChange = (current: number) => {
            console.log(current, "分页改变");
            pages.value = current;
            doRefresh();
        }
        //页条改变
        const pagingSizeChange = (pageSize: number) => {
            console.log(pageSize, "条数")
            pages.value = 1;
            paging.size = pageSize;
            doRefresh();
        }
        const alone = (rowKeys, rowKey, record) => {
            // console.log(rowKeys);
            // console.log(rowKey);
            // console.log(record);
        }
        const alonell = (selected, selectedRows,) => {
            // console.log(selected);
            // console.log(selectedRows);
        }
        const scroll = {
            // x: 2000,
            y: 185
        };
        const tablediv = ref(null)
        const pageData = reactive<{
            clothList: ClothSet[]
            showAdd: boolean
            sideTitle: string
            dropDownData: string
            pageLoading: boolean,
            theight: number,
            tablediv: any,
            rHeight: number | undefined,
            customName?: string
        }>({
            clothList: [],
            showAdd: false,
            sideTitle: "新增资料",
            dropDownData: "",
            pageLoading: false,
            theight: 0,
            tablediv: null,
            rHeight: 0
        });
        const dropDown = reactive({
            bumen: [],
            machining: [],
            label: [],
        })
        // ***************区域下拉**********************************************
        //区域下拉框得到焦点
        const focusSel = () => {
            selCxAll({ customArea: "" })
        }
        //区域下拉数据
        const options = ref<any>(pageData.clothList);
        const loading = ref(false);
        const handleSearch = (value: any) => {
            if (value) {
                const ob = { customArea: value }
                loading.value = true;
                selCxAll(ob);
                options.value = pageData.clothList;
                loading.value = false;
            } else {
                options.value = []
            }
        };

        //区域下拉框查询
        function selCxAll(val: any) {
            post({
                url: "/aps/customArea/getDropValue",
                data: val
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    pageData.clothList = data;
                } else {
                    Message.error({
                        content: "查询失败！",
                        duration: 5000,
                    });
                }
            });
        }
        //************************************************************** */
        // ***************部门下拉**********************************************
        //部门下拉框得到焦点
        // const focusSels = () => {
        //     selCxAlls({ customArea: "" })
        // }
        // //部门下拉数据      
        // const optionss = ref<any>(dropDown.bumen);
        // const loadings = ref(false);
        // const handleSearchs = (value: any) => {
        //     if (value) {
        //         const ob = { customArea: value }
        //         loadings.value = true;
        //         selCxAlls(ob);
        //         optionss.value = dropDown.bumen;
        //         loadings.value = false;
        //     } else {
        //         optionss.value = []
        //     }
        // };

        // //部门下拉框查询
        // function selCxAlls(val: any) {
        //     post({
        //         url: "/aps/customArea/getDropValue",
        //         data: val
        //     }).then(({ data, code }: any) => {
        //         if (code === 200) {
        //             dropDown.bumen = data;
        //         } else {
        //             Message.error({
        //                 content: "查询失败！",
        //                 duration: 5000,
        //             });
        //         }
        //     });
        // }
        const bmoption = reactive({
            bmoptions: [],
            salesmans: []
        })
        function bumenhq() {
            post({
                url: `/org/baCompany/getDepartmentTreeByUser`,
            })
                .then((result) => {
                    if (result.code === 200) {
                        // console.log(result, "部门数据")
                        bmoption.bmoptions = result.data;
                    }

                })
        }
        function ywyhq() {
            post({
                url: `/org/hrEmployee/getList`,
                data: {
                    departmentId: dataForm.department
                }
            })
                .then((result) => {
                    if (result.code === 200) {
                        //  console.log(result, "业务员数据")
                        bmoption.salesmans = result.data;
                    }

                })
        }
        const bmchange = (val) => {
            dataForm.salesmanId = ""
            dataForm.salesman = ""
             ywyhq();
            // console.log(val, "asdasd")
            // console.log(dataForm.department, "选中的值")
        }
        const ywgbcf = (val) => {
            // console.log(val, "asdasd")
            if (val == true && !dataForm.department) {
                Message.warning({
                    content: "请先选择部门",
                    duration: 5000,
                });
            }
        }
        //************************************************************** */
        // ***************加工类型下拉**********************************************
        //加工类型下拉框得到焦点
        const focusSelas = () => {
            selCxAllas({ machinType: "" })
        }
        //加工类型下拉数据 
        const optionsas = ref<any>(dropDown.machining);
        const loadingas = ref(false);
        const handleSearchas = (value: any) => {
            if (value) {
                const ob = { machinType: value }
                loadingas.value = true;
                selCxAllas(ob);
                optionsas.value = dropDown.machining;
                loadingas.value = false;
            } else {
                optionsas.value = []
            }
        };

        //加工类型下拉框查询
        function selCxAllas(val: any) {
            post({
                url: "/aps/machinType/getDropValue",
                data: val
            }).then(({ data, code }: any) => {
                // console.log(data,"加工类型");
                if (code === 200) {
                    dropDown.machining = data;
                } else {
                    Message.error({
                        content: "查询失败！",
                        duration: 5000,
                    });
                }
            });
        }
        //************************************************************** */
        // ***************标签格式下拉**********************************************
        //标签格式下拉框得到焦点
        const focusSelasd = () => {
            selCxAllasd({ labelFormat: "" })
        }
        //标签格式下拉数据 
        const optionsasd = ref<any>(dropDown.label);
        const loadingasd = ref(false);
        const handleSearchasd = (value: any) => {
            if (value) {
                const ob = { labelFormat: value }
                loadingasd.value = true;
                selCxAllasd(ob);
                optionsasd.value = dropDown.label;
                loadingasd.value = false;
            } else {
                optionsasd.value = []
            }
        };

        //标签格式下拉框查询
        function selCxAllasd(val: any) {
            post({
                url: "/aps/labelFormat/getDropValue",
                data: val
            }).then(({ data, code }: any) => {
                console.log(data, "标签类型");
                if (code === 200) {
                    dropDown.label = data;
                } else {
                    Message.error({
                        content: "查询失败！",
                        duration: 5000,
                    });
                }
            });
        }
        //************************************************************** */
        //小缸费改变
        const xgfchange = (value) => {
            // console.log(value,"xgf");
            value == true ? dataForm.smallCylinderCost = 0 : dataForm.smallCylinderCost = 1
            // console.log(dataForm.smallCylinderCost,999999999);
        }
        //物测改变
        const wcchange = (value) => {
            // console.log(value,"wc");
            value == true ? dataForm.okState = 0 : dataForm.okState = 1
            // console.log(dataForm.okState,999999999);
        }
        onMounted(() => {
            doRefresh();
            bumenhq();
        });
        //回车查询
        const huiche = () => {
            pages.value = 1;
            doRefresh();
        }
        //查询
        const selectHandler = () => {
            pages.value = 1;
            doRefresh();
        }
        const queryData = reactive({
            clothType: "",
        });
        const addHandler = () => {
            for (var key in dataForm) {
                if (key === "id") {
                    dataForm[key] = null;
                } else if (key == 'smallCylinderCost' || key == 'okState') {
                    dataForm[key] = 0;
                }
                else {
                    dataForm[key] = "";
                }

            }
            pageData.showAdd = true;
            pageData.sideTitle = "新增资料";
        };

        //英文列表添加
        const englishAdd = () => {
            console.log(1111111111)
            tableCon.EnglishTable.push(JSON.parse(JSON.stringify(englishObj)));
            console.log(tableCon.EnglishTable, "shuaixn")
            //  gridOptiony.value.setRowData(tableCon.EnglishTable);
            setTimeout(function () { gridOptiony.value.setRowData(tableCon.EnglishTable); }, 0)
        }
        //品牌列表添加
        const pinpaiAdd = () => {
            tableCon.brandInTable.push(JSON.parse(JSON.stringify(pinpaiObj)));
            setTimeout(function () { gridOptionp.value.setRowData(tableCon.brandInTable); }, 0)
        }
        //送货列表添加
        const songhuoAdd = () => {
            tableCon.shippTable.push(JSON.parse(JSON.stringify(songhuoObj)));
            setTimeout(function () { gridOptions.value.setRowData(tableCon.shippTable); }, 0)
        }
        const dataForm = reactive<ClothSet>({
            id: null,
            customCode: "",
            customName: "",
            customFullName: "",
            address: "",
            customArea: "",
            phoneNum: "",
            department: "",
            salesman: "",
            salesmanId: "",
            filingDate: "",
            accountBank: "",
            account: "",
            url: "",
            email: "",
            contactPerson: "",
            machinType: "",
            legalPerson: "",
            labelFormat: "",
            smallCylinderCost: 0,
            okState: 0,
        });
        const englishObj = reactive<ClothSet>({
            englishName: "",
            englishFullName: "",
            englishAddress: "",
            shippingMark: "",
            account: "",
            accountBank: "",
            remark: ""
        });
        const pinpaiObj = reactive<ClothSet>({
            brandName: "",
            brandDescribe: "",
            establishedTime: "",
            brandOrientation: "",
            manage: "",
            saleChannel: "",
            salesOnlineArea: "",
            saleArea: "",
            annualIncome: "",
            annualIncomeUnit: "",
            remark: "",
        });
        const songhuoObj = reactive<ClothSet>({
            deliveryAddress: "",
            city: "",
            country: "",
            region: "",
            remark: "",
        });
        const formRef = ref<FormInstance>();
        const sideOk = () => {

            gridOptiony.value.clearFocusedCell();
            //   gridOptionp.value.clearFocusedCell();
            // gridOptions.value.clearFocusedCell();

            // console.log(dataForm, 55454545454545);
            dataForm.englishInfo = tableCon.EnglishTable;
            dataForm.brandInfo = tableCon.brandInTable;
            dataForm.deliveryInfo = tableCon.shippTable;
            formRef.value?.validate().then((err) => {
                if (!err) {
                    if (pageData.sideTitle === "新增资料") {
                        post({
                            url: "/aps/custom/insert",
                            data: dataForm,
                        }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();

                                pageData.showAdd = false;

                                Message.success({
                                    content: "新增成功",
                                    duration: 5000,
                                });
                                doRefresh();
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 5000,
                                });
                            }

                        });
                    } else {
                        post({
                            url: "/aps/custom/update",
                            data: dataForm,
                        }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();
                                pageData.showAdd = false;

                                Message.success({
                                    content: "修改成功",
                                    duration: 5000,
                                });
                                doRefresh();
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 5000,
                                });
                            }

                        });
                    }
                }
            });
        }
        const ywychange = (val) => {
         console.log(val,66666);
          bmoption.salesmans.forEach(item => {
                  if(item.name === val){
                    dataForm.salesmanId = item.id
                  }
          })
        }
        const yonghlbgb = () => {
            dataForm.department = ""
            bmoption.salesmans = [];
            pageData.showAdd = false;

        }
        const deleteHandler = (record: ClothSet) => {
            // var arr = [];
            // arr = gridOption.value.getSelectedRows().map((item) => {
            //     return item.id
            // })
            // console.log(record,33333)
            var arr = [];
            arr.push(record.id);
            Modal.confirm({
                title: "系统提示",
                content: "确认删除选中的数据?",
                onOk() {
                    post({
                        url: "/aps/custom/delete",
                        data: arr,
                    }).then(({ code, data }: any) => {
                        if (code === 200) {
                            Message.success({
                                content: "删除成功",
                                duration: 5000,
                            });
                            // if (selectedRowKeys.value.length == tableCon.tableConter.length) {
                            //     pages.value > 1 ? pages.value-- : pages.value = 1
                            //     doRefresh();
                            // } else {
                            //     doRefresh();
                            // }
                            pages.value = 1;
                            doRefresh();
                        } else {
                            Message.error({
                                content: "删除失败",
                                duration: 5000,
                            });
                        }
                        selectedRowKeys.value = [];
                    });
                },
            });
        };
        //英文列表删除
        const deleteEnglish = (val) => {
            console.log(val, "英文删除");
            Modal.confirm({
                title: "系统提示",
                content: "确认删除选中的数据?",
                onOk() {
                    tableCon.EnglishTable.splice(val, 1);
                    setTimeout(function () { gridOptiony.value.setRowData(tableCon.EnglishTable); }, 0);
                    // console.log(tableCon.EnglishTable, "shngeyu")
                },
            });
        };
        //品牌列表删除
        const deletePinpai = (val) => {
            //  console.log(rowIndex)
            Modal.confirm({
                title: "系统提示",
                content: "确认删除选中的数据?",
                onOk() {
                    tableCon.brandInTable.splice(val, 1);
                    setTimeout(function () { gridOptionp.value.setRowData(tableCon.brandInTable); }, 0);
                    //  console.log(tableCon.EnglishTable, "shngeyu")
                },
            });
        };
        //送货列表删除
        const deleteSonghuo = (val) => {
            //  console.log(rowIndex)
            Modal.confirm({
                title: "系统提示",
                content: "确认删除选中的数据?",
                onOk() {
                    tableCon.shippTable.splice(val, 1);
                    setTimeout(function () { gridOptions.value.setRowData(tableCon.shippTable); }, 0);
                    //  console.log(tableCon.EnglishTable, "shngeyu")
                },
            });
        };
        const editHandler = (record: ClothSet) => {
            post({
                url: "/aps/custom/updateSelect",
                data: { id: record.id },
            }).then(({ code, data }: any) => {
                // console.log(data, "详情结果被");
                var obj = data.custom
                for (var key in obj) {
                    dataForm[key] = obj[key]
                }
                if (dataForm.department != "") {
                    ywyhq();
                }
                tableCon.EnglishTable = data.customEnglishList
                tableCon.brandInTable = data.customBrandList
                tableCon.shippTable = data.customDeliveryList
                if (code === 200) {
                    Message.success({
                        content: "获取成功",
                        duration: 5000,
                    });
                } else {
                    Message.error({
                        content: "获取失败",
                        duration: 5000,
                    });
                }
            });
            pageData.sideTitle = '修改资料'
            pageData.showAdd = true
        };
        const sqblur = () => {
            console.log(111111111);
            dataForm.customCode = dataForm.customCode.toUpperCase();
        }

        //导出
        const exports = () => {
            if (selectedRowKeys.value.length === 0) {
                Message.error('请先勾选')
                return
            } else {
                //将表头拼接出来
                let head = "<th>编号</th><th>名称</th><th>备注</th><th>创建人</th><th>创建时间</th><th>最后修改人</th><th>最后修改时间</th>"
                //拿到当前表格数据与勾选的行做筛选

                let nowRow = table.dataList.filter(function (o) {
                    return selectedRowKeys.value.indexOf(o["id"]) !== -1;
                })
                let body = "";
                nowRow.forEach(function (o) {
                    body += "<tr><td>" + o["merceryCode"] + "</td>";
                    body += "<td>" + o["merceryName"] + "</td>";
                    body += "<td>" + o["remark"] + "</td>";
                    body += "<td>" + o["createName"] + "</td>";
                    body += "<td>" + o["createTime"] + "</td>";
                    body += "<td>" + o["updateName"] + "</td>";
                    body += "<td>" + o["updateTime"] + "</td>";
                    body += "</tr>";
                })
                tableToXlsx(head, '布类资料', body)
                console.log(table)
            }
        }

        function tableToXlsx(head: any, filename: any, body: any) {
            const uri = 'data:application/vnd.ms-excel;base64,',
                template = `<html>
          <head><meta charset="UTF-8"></head>
          <body><table border="1"><tr>${head}</tr>${body}</table></body>
      </html>`;

            const a = document.createElement('a');
            a.href = uri + window.btoa(unescape(encodeURIComponent(template)));
            a.download = filename;
            a.click();
            document.removeChild(a);
        }

        //模板下载
        const downloadHandler = () => {
            axios.get(baseURL + '/product/mercery/uploadMerceryModel', {
                responseType: 'blob',
                headers: {
                    token: sessionStorage.getItem('USER-TOKEN-KEY')
                }
            }).then((res) => {
                if (res.status === 200) {
                    filedownload(res.data, '布类资料.xlsx')
                }
            })
        }
        //导入
        const importHandler = () => {

            const inputEle: HTMLInputElement = document.createElement('input')
            inputEle.type = 'file'
            inputEle.id = 'fileUploadExcel'
            inputEle.accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
            inputEle.addEventListener('change', (e) => {
                const formData = new FormData()
                if (inputEle.files !== null) {
                    formData.append('file', inputEle.files[0] || '')
                } else {
                    Message.warning('未选择文件！');
                    return
                }
                pageData.pageLoading = true
                axios.post(baseURL + '/product/mercery/analyseMerceryModel', formData, {
                    headers: {
                        "Content-Type": 'multipart/form-data',
                        "token": sessionStorage.getItem('USER-TOKEN-KEY')
                    },
                }).then((result) => {
                    if (result.data['code'] === 200) {
                        Message.success('导入成功')
                    } else {
                        Message.error(result.data.message)
                    }

                }).finally(() => {
                    pageData.pageLoading = false
                    doRefresh()
                })
            })
            inputEle.click()
        }
        const shisjg = (value, ev) => {
            // console.log(value,"555555555555");
            dataForm.phoneNum = value.replace(/[^\d]/g, '');
        }
        return {
            shisjg,
            alone,
            alonell,
            scroll,
            scrollbar,
            tablediv,
            downloadHandler,
            importHandler,
            hasChiese,
            deleteHandler,
            sideOk,
            yonghlbgb,
            ywychange,
            formRef,
            dataForm,
            addHandler,
            selectedRowKeys,
            pagination,
            // tableColumns,
            table,
            columns,
            tableCon,
            rowKey,
            pageData,
            queryData,
            editHandler,
            selectHandler,
            options,
            loading,
            handleSearch,
            exports,
            focusSel,
            headerShow,
            InformationEnglishbt,
            brandInformationbt,
            shippingInformationbt,
            paging,
            pagingChange,
            pagingSizeChange,
            pages,
            headerShows,
            englishObj,
            englishAdd,
            deleteEnglish,
            pinpaiAdd,
            pinpaiObj,
            deletePinpai,
            songhuoAdd,
            songhuoObj,
            deleteSonghuo,
            //  focusSels,
            // optionss,
            //  loadings,
            //  handleSearchs,
            bmoption,

            bmchange,
            ywgbcf,
            focusSelas,
            optionsas,
            loadingas,
            handleSearchas,
            focusSelasd,
            optionsasd,
            loadingasd,
            handleSearchasd,
            dropDown,
            xgfchange,
            zsccfxsj,
            wcchange,
            sqblur,
            talchange,
            huiche,
            ywyhq,
            /**************** */
            rowData,
            defaultColDef,
            columnDefs,
            tc,
            gridReady,
            gridOption,
            /************************ */
            /********英文*******/
            defaultColDefy,
            tcy,
            gridOptiony,
            gridReadye,
            /************** */
            /*********品牌******** */
            defaultColDefp,
            tcp,
            gridOptionp,
            gridReadyp,
            /***************** */
            /**********送货************* */
            defaultColDefs,
            tcs,
            gridOptions,
            gridReadys,
            /************************ */
            Search,
            CirclePlus,
            Delete
        };
    },
    components: { Toolbar,  },
};
</script>
<style  lang="less">
.pagings {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.arco-input-wrapper {
    background-color: #fff !important;
    border: 1px solid #cccccc;
}

.arco-input-wrapper:hover {
    border: 1px solid #cccccc !important;
}

.arco-form-item-status-error .arco-input-wrapper:not(.arco-input-disabled),
.arco-form-item-status-error .arco-textarea-wrapper:not(.arco-textarea-disabled) {
    border: 1px solid #f53f3f;
}

.arco-select-view-single {
    background-color: #fff !important;
    border: 1px solid #cccccc;
}

.arco-select-view-single:hover {
    border: 1px solid #cccccc !important;
}

.arco-form-item-status-error .arco-select-view:not(.arco-select-view-disabled) {
    border: 1px solid #f53f3f;
}

.arco-picker {
    background-color: #fff !important;
    border: 1px solid #cccccc;
}

.arco-picker:hover {
    border: 1px solid #cccccc !important;
}

.arco-picker-error {
    border: 1px solid #f53f3f;
}

.tjan {
    padding: 0 0px 6px 10px;
    display: flex;
    justify-content: flex-end;
}

.shruq-but {
    width: 90px;
    height: 30px;
    color: #165dff;
    background-color: #e8f7ff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
    cursor: pointer;
}

/********************************************** */
.stbutencx {
    background-color: #409eff;

    &:hover {
        background-color: #79bbff;
    }
}

.ag-header-cell-resize::after {
    top: 0 !important;
    height: 100% !important;
}

.ag-cell {
    border-right: 1px solid #D9DDDF !important;
}

.stbutenxz {
    background-color: #67c23a;

    &:hover {
        background-color: #b3e19d;
    }
}

/************************************************** */
</style>